<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>江西财经大学迎新网</title>
    <script src="javascripts/jquery.min.js"></script>
    <link rel="icon" href="img/JXCJ.jpg" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/school.css" />
    <!-- 2023.10.19 熊健先 -->
  </head>
  <body>
    <div class="header">
      <div class="header_con">
        <div class="logo">
          <img src="img/logo.png" alt="" srcset="" />
        </div>
        <div class="Nav">
          <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="school.html?theme=入学指南">入学指南</a></li>
            <li><a href="school.html?theme=新闻动态">新闻动态</a></li>
          </ul>
          <div class="Nav_que">
            <a href="school.html?theme=学校简介">学校简介</a>
            <img src="img/code.jpg" alt="" srcset="" />
          </div>
        </div>
      </div>
    </div>
    <div class="school_con">
      <div class="school_nav">
        <ul>
          <li><a href="school.html?theme=迎新公告">迎新公告</a></li>
          <li><a href="school.html?theme=入学指南">入学指南</a></li>
          <li><a href="school.html?theme=新闻动态">新闻动态</a></li>
          <li><a href="school.html?theme=新生政策">新生政策</a></li>
          <li><a href="school.html?theme=学校简介">学校简介</a></li>
          <li><a href="school.html?theme=学在江财">学在江财</a></li>
          <li><a href="school.html?theme=住在江财">住在江财</a></li>
          <li><a href="school.html?theme=吃在江财">吃在江财</a></li>
          <li><a href="school.html?theme=周边交通">周边交通</a></li>
          <li><a href="school.html?theme=校园风采">校园风采</a></li>
        </ul>
      </div>
      <script>
        $(() => {
          // 获取当前页面的 URL
          var url = window.location.href
          // 解析 URL 参数
          var params = new URL(url)
          var theme = params.searchParams.get('theme') || ''
          var themeSecond = params.searchParams.get('themeSecond')
          console.log(theme, themeSecond)

          //导航栏效果
          console.log(theme)
          for (let i = 0; i < $('.school_nav').find('li').length; i++) {
            if ($('.school_nav').find('li').eq(i).children('a').text() == theme) {
              $('.school_nav').find('li').eq(i).children('a').addClass('navRed').parent('li').siblings('li').children('a').removeClass('navRed')
            }
            $('.location').find('em').text(theme)
          }

          //获取json数据，并根据种类筛选
          fetch('/test')
            .then((response) => response.json())
            .then((data) => {
              let newData = data.filter((item) => {
                if (theme) {
                  return item.kind == theme
                } else {
                  return item
                }
              })

              //判断是否需要筛选出单个的具体内容
              let newContents = newData.filter((item) => {
                //点击进入具体内容
                if (themeSecond) {
                  $('.newList').hide()
                  $('.newsContent').show()
                  return item.id == themeSecond
                } else {
                  //未点击进入具体内容
                  $('.newsContent').hide()
                  $('.newList').show()
                  return
                }
              })

              newData.forEach((element) => {
                let newli = `<div class = "newli">
                      <a href="school.html?theme=${element.kind}&themeSecond=${element.id}">
                        <h3><img src="img/arrow.png" alt="" srcset="" />${element.title}</h3>
                        <p>${element.titleSecond}</p>
                      </a>
                    </div>`
                $('.newList').append(newli)
              })

              if (themeSecond) {
                let [newContent] = newContents
                $('.newsContent').children('h2').text(newContent.title).siblings('p').text(newContent.content)
                let index = themeSecond
                $('.last').click(function () {
                  if (index == parseInt(newData[0].id)) {
                    alert('已经是第一篇了')
                  } else {
                    index--
                    window.location.href = `school.html?theme=${theme}&themeSecond=${index}`
                  }
                  console.log(index)
                })
                $('.next').click(function () {
                  if (index == parseInt(newData[newData.length - 1].id)) {
                    alert('已经是最后一篇了')
                  } else {
                    index++
                    window.location.href = `school.html?theme=${theme}&themeSecond=${index}`
                  }
                  console.log(index)
                })
              }
            })
        })
      </script>

      <div class="school_content">
        <div class="location">
          <img src="img/401位置.png" alt="" srcset="" />
          <span>当前位置： <a href="index.html">首页</a>><em>入学指南</em></span>
        </div>
        <div class="newList"></div>
        <div class="newsContent">
          <h2>xxxxxxxxxxxxxxxxxxxxxxx</h2>
          <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
          <div class="pageButton">
            <button class="last">上一页</button>
            <button class="next">下一页</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
